<!DOCTYPE html>

































































<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" type="image/x-icon" href="../../../favicon.ico" />
<title>Debugging and Profiling User Interfaces | Android Developers</title>
<link href="../../../assets/android-developer-docs-devguide.css" rel="stylesheet" type="text/css" />
<script src="../../../assets/search_autocomplete.js" type="text/javascript"></script>
<script src="../../../assets/jquery-resizable.min.js" type="text/javascript"></script>
<script src="../../../assets/android-developer-docs.js" type="text/javascript"></script>
<script src="../../../assets/prettify.js" type="text/javascript"></script>
<script type="text/javascript">
  setToRoot("../../../");
</script>
<noscript>
  <style type="text/css">
    html,body{overflow:auto;}
    #body-content{position:relative; top:0;}
    #doc-content{overflow:visible;border-left:3px solid #666;}
    #side-nav{padding:0;}
    #side-nav .toggle-list ul {display:block;}
    #resize-packages-nav{border-bottom:3px solid #666;}
  </style>
</noscript>
</head>
<body class="gc-documentation">

  <div id="header">
      <div id="headerLeft">
          <a href="../../../index.html" tabindex="-1"><img
              src="../../../assets/images/bg_logo.png" alt="Android Developers" /></a>
          <ul id="header-tabs" class="guide">
    
	<li id="home-link"><a href="../../../offline.html">
	
		<span class="en">Home</span>
		<span style="display:none" class="de">Startseite</span>
		<span style="display:none" class="es"></span>
		<span style="display:none" class="fr"></span>
		<span style="display:none" class="it"></span>
		<span style="display:none" class="ja">ホーム</span>
		<span style="display:none" class="zh-CN">主页</span>
		<span style="display:none" class="zh-TW">首頁</span>
	
	</a></li>
	<li id="sdk-link"><a href="../../../sdk/index.html">
		<span class="en">SDK</span>
	</a></li>
	<li id="guide-link"><a href="../../../guide/index.html" onClick="return loadLast('guide')">
	
		<span class="en">Dev Guide</span>
		<span style="display:none" class="de">Handbuch</span>
		<span style="display:none" class="es">Guía</span>
		<span style="display:none" class="fr">Guide</span>
		<span style="display:none" class="it">Guida</span>
		<span style="display:none" class="ja">開発ガイド</span>
		<span style="display:none" class="zh-CN">开发人员指南</span>
		<span style="display:none" class="zh-TW">開發指南</span>
	
	</a></li>
	<li id="reference-link"><a href="../../../reference/packages.html" onClick="return loadLast('reference')">
	
		<span class="en">Reference</span>
		<span style="display:none" class="de">Referenz</span>
		<span style="display:none" class="es">Referencia</span>
		<span style="display:none" class="fr">Référence</span>
		<span style="display:none" class="it">Riferimento</span>
		<span style="display:none" class="ja">リファレンス</span>
		<span style="display:none" class="zh-CN">参考</span>
		<span style="display:none" class="zh-TW">參考資料</span>
	
	</a></li>
	<li id="resources-link"><a href="../../../resources/index.html" onClick="return loadLast('resources')">
	
		<span class="en">Resources</span>
		<span style="display:none" class="de"></span>
		<span style="display:none" class="es"></span>
		<span style="display:none" class="fr"></span>
		<span style="display:none" class="it"></span>
    		<span style="display:none" class="ja"></span>
		<span style="display:none" class="zh-CN"></span>
		<span style="display:none" class="zh-TW"></span>
	
	</a></li>
	<li id="videos-link"><a href="../../../videos/index.html" onClick="return loadLast('videos')">
	
		<span class="en">Videos</span>
		<span style="display:none" class="de"></span>
		<span style="display:none" class="es"></span>
		<span style="display:none" class="fr"></span>
		<span style="display:none" class="it"></span>
		<span style="display:none" class="ja">ビデオ</span>
		<span style="display:none" class="zh-CN"></span>
		<span style="display:none" class="zh-TW"></span>
	
	</a></li>
	<li><a href="http://android-developers.blogspot.com" onClick="return requestAppendHL(this.href)">
	
		<span class="en">Blog</span>
		<span style="display:none" class="de"></span>
		<span style="display:none" class="es"></span>
		<span style="display:none" class="fr"></span>
		<span style="display:none" class="it"></span>
		<span style="display:none" class="ja">ブログ</span>
		<span style="display:none" class="zh-CN">博客</span>
		<span style="display:none" class="zh-TW">網誌</span>
	
	</a></li>


     
</ul>
     
      </div>
      <div id="headerRight">
          <div id="headerLinks">
          
          <a href="http://www.android.com">Android.com</a>
          </div>
  <div id="search" >
      <div id="searchForm">
          <form accept-charset="utf-8" class="gsc-search-box" 
                onsubmit="return submit_search()">
            <table class="gsc-search-box" cellpadding="0" cellspacing="0"><tbody>
                <tr>
                  <td class="gsc-input">
                    <input id="search_autocomplete" class="gsc-input" type="text" size="33" autocomplete="off"
                      title="search developer docs" name="q"
                      value="search developer docs"
                      onFocus="search_focus_changed(this, true)"
                      onBlur="search_focus_changed(this, false)"
                      onkeydown="return search_changed(event, true, '../../../')"
                      onkeyup="return search_changed(event, false, '../../../')" />
                  <div id="search_filtered_div" class="no-display">
                      <table id="search_filtered" cellspacing=0>
                      </table>
                  </div>
                  </td>
                  <td class="gsc-search-button">
                    <input type="submit" value="Search" title="search" id="search-button" class="gsc-search-button" />
                  </td>
                  <td class="gsc-clear-button">
                    <div title="clear results" class="gsc-clear-button">&nbsp;</div>
                  </td>
                </tr></tbody>
              </table>
          </form>
      </div><!-- searchForm -->
  </div><!-- search -->
      </div><!-- headerRight -->
      <script type="text/javascript">
        <!--  
        changeTabLang(getLangPref());
        //-->
      </script>
  </div><!-- header -->

  <div class="g-section g-tpl-240" id="body-content">
    <div class="g-unit g-first" id="side-nav">
      <div id="devdoc-nav">
<ul>

  <li>
    <h2><span class="en">Android Basics</span>
        <span class="de" style="display:none">Einführung in Android</span>
        <span class="es" style="display:none">Información básica sobre Android</span>
        <span class="fr" style="display:none">Présentation d'Android</span>
        <span class="it" style="display:none">Nozioni di base su Android</span>
        <span class="ja" style="display:none">Android の基本</span>
        <span class="zh-CN" style="display:none">Android 基础知识</span>
        <span class="zh-TW" style="display:none">Android 簡介</span>
    </h2>
    <ul>
      <li><a href="../../../guide/basics/what-is-android.html">
        <span class="en">What Is Android?</span>
        <span class="de" style="display:none">Was ist Android?</span>
        <span class="es" style="display:none">¿Qué es Android?</span>
        <span class="fr" style="display:none">Qu'est-ce qu'Android&nbsp;?</span>
        <span class="it" style="display:none">Che cos'è Android?</span>
        <span class="ja" style="display:none">Android とは</span>
        <span class="zh-CN" style="display:none">Android 是什么？</span>
        <span class="zh-TW" style="display:none">什麼是 Android？</span>
          </a></li>
      <li><a href="../../../guide/topics/fundamentals.html">
        <span class="en">Application Fundamentals</span>
        <span class="de" style="display:none">Anwendungsgrundlagen</span>
        <span class="es" style="display:none">Fundamentos de las aplicaciones</span>
        <span class="fr" style="display:none">Principes de base des applications</span>
        <span class="it" style="display:none">Concetti fondamentali sulle applicazioni</span>
        <span class="ja" style="display:none">開発の基礎</span>
        <span class="zh-CN" style="display:none">应用程序基础</span>
        <span class="zh-TW" style="display:none">應用程式基本原理</span>
      </a></li>

  <!--  <li><a style="color:gray;">The Android SDK</a></li> -->
  <!--  <li><a style="color:gray;">Walkthrough for Developers</a></li> -->
      <!-- quick overview of what it's like to develop on Android -->
    </ul>
  </li>

  <li>
    <h2>
      <span class="en">Framework Topics</span>
      <span class="de" style="display:none">Framework-Themen</span>
      <span class="es" style="display:none">Temas sobre el framework</span>
      <span class="fr" style="display:none">Thèmes relatifs au framework</span>
      <span class="it" style="display:none">Argomenti relativi al framework</span>
      <span class="ja" style="display:none">フレームワーク トピック</span>
      <span class="zh-CN" style="display:none">框架主题</span>
      <span class="zh-TW" style="display:none">架構主題</span>
    </h2>
    <ul>
      <li class="toggle-list">
        <div><a href="../../../guide/topics/fundamentals/activities.html">
          <span class="en">Activities</span>
        </a></div>
        <ul>
          <li><a href="../../../guide/topics/fundamentals/fragments.html">
            <span class="en">Fragments</span>
          </a></li>
          <li><a href="../../../guide/topics/fundamentals/loaders.html">
            <span class="en">Loaders</span>
          </a></li>
          <li><a href="../../../guide/topics/fundamentals/tasks-and-back-stack.html">
            <span class="en">Tasks and Back Stack</span></a></li>
        </ul>
      </li>
      <li class="toggle-list">
        <div><a href="../../../guide/topics/fundamentals/services.html">
          <span class="en">Services</span>
        </a></div>
        <ul>
          <li><a href="../../../guide/topics/fundamentals/bound-services.html">
            <span class="en">Bound Services</span>
          </a></li>
        </ul>
      </li>
      <li><a href="../../../guide/topics/providers/content-providers.html">
            <span class="en">Content Providers</span>
          </a></li>
      <li><a href="../../../guide/topics/intents/intents-filters.html">
            <span class="en">Intents and Intent Filters</span>
          </a></li>
      <li><a href="../../../guide/topics/fundamentals/processes-and-threads.html">
            <span class="en">Processes and Threads</span>
          </a></li>
    </ul>


    <ul>
      <li class="toggle-list">
        <div><a href="../../../guide/topics/ui/index.html">
            <span class="en">User Interface</span>
          </a></div>
        <ul>
          <li><a href="../../../guide/topics/ui/declaring-layout.html">
               <span class="en">XML Layouts</span>
              </a></li>
          <li><a href="../../../guide/topics/ui/ui-events.html">
                <span class="en">Input Events</span>
              </a></li>
          <li><a href="../../../guide/topics/ui/menus.html">
               <span class="en">Menus</span>
              </a></li>
          <li><a href="../../../guide/topics/ui/actionbar.html">
               <span class="en">Action Bar</span>
              </a></li>
          <li><a href="../../../guide/topics/ui/dialogs.html">
                <span class="en">Dialogs</span>
              </a></li>
          <li class="toggle-list">
            <div><a href="../../../guide/topics/ui/notifiers/index.html">
                <span class="en">Notifications</span>
            </a></div>
            <ul>
              <li><a href="../../../guide/topics/ui/notifiers/toasts.html">
                <span class="en">Toast Notifications</span>
              </a></li>
              <li><a href="../../../guide/topics/ui/notifiers/notifications.html">
                <span class="en">Status Bar Notifications</span>
              </a></li>
            </ul>
          </li>
          <li><a href="../../../guide/topics/ui/drag-drop.html">
                <span class="en">Drag and Drop</span>
              </a></li>
          <li><a href="../../../guide/topics/ui/themes.html">
                <span class="en">Styles and Themes</span>
              </a></li>
          <li><a href="../../../guide/topics/ui/custom-components.html">
                <span class="en">Custom Components</span>
              </a></li>
          <li><a href="../../../guide/topics/ui/binding.html">
                <span class="en">Binding to Data with AdapterView</span>
              </a></li>
          <li><a href="../../../guide/topics/ui/layout-objects.html">
                <span class="en">Common Layout Objects</span>
              </a></li>
          <li><a href="../../../guide/topics/ui/how-android-draws.html">
                <span class="en">How Android Draws Views</span>
              </a></li>
        </ul>
      </li><!-- end of User Interface -->

      <li class="toggle-list">
        <div><a href="../../../guide/topics/resources/index.html">
               <span class="en">Application Resources</span>
             </a></div>
        <ul>
          <li><a href="../../../guide/topics/resources/providing-resources.html">
                <span class="en">Providing Resources</span>
              </a></li>
          <li><a href="../../../guide/topics/resources/accessing-resources.html">
                <span class="en">Accessing Resources</span>
              </a></li>
          <li><a href="../../../guide/topics/resources/runtime-changes.html">
                <span class="en">Handling Runtime Changes</span>
              </a></li>
          <li><a href="../../../guide/topics/resources/localization.html">
                <span class="en">Localization</span>
              </a></li>
          <li class="toggle-list">
            <div><a href="../../../guide/topics/resources/available-resources.html">
              <span class="en">Resource Types</span>
            </a></div>
            <ul>
              <li><a href="../../../guide/topics/resources/animation-resource.html">Animation</a></li>
              <li><a href="../../../guide/topics/resources/color-list-resource.html">Color State List</a></li>
              <li><a href="../../../guide/topics/resources/drawable-resource.html">Drawable</a></li>
              <li><a href="../../../guide/topics/resources/layout-resource.html">Layout</a></li>
              <li><a href="../../../guide/topics/resources/menu-resource.html">Menu</a></li>
              <li><a href="../../../guide/topics/resources/string-resource.html">String</a></li>
              <li><a href="../../../guide/topics/resources/style-resource.html">Style</a></li>
              <li><a href="../../../guide/topics/resources/more-resources.html">More Types</a></li>
            </ul>
          </li><!-- end of resource types -->
        </ul>
      </li><!-- end of app resources -->
      <li class="toggle-list">
        <div><a href="../../../guide/topics/data/data-storage.html">
            <span class="en">Data Storage</span>
          </a></div>
          <ul>
            <li><a href="../../../guide/topics/data/backup.html">
                <span class="en">Data Backup</span>
              </a>
            </li>
          </ul>
      </li>
      <li><a href="../../../guide/topics/security/security.html">
            <span class="en">Security and Permissions</span>
          </a></li>
      <li class="toggle-list">
        <div><a href="../../../guide/topics/manifest/manifest-intro.html">
          <span class="en">The AndroidManifest.xml File</span>
        </a></div>
        <ul>
          <li><a href="../../../guide/topics/manifest/action-element.html">&lt;action&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/activity-element.html">&lt;activity&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/activity-alias-element.html">&lt;activity-alias&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/application-element.html">&lt;application&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/category-element.html">&lt;category&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/compatible-screens-element.html">&lt;compatible-screens&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/data-element.html">&lt;data&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/grant-uri-permission-element.html">&lt;grant-uri-permission&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/instrumentation-element.html">&lt;instrumentation&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/intent-filter-element.html">&lt;intent-filter&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/manifest-element.html">&lt;manifest&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/meta-data-element.html">&lt;meta-data&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/path-permission-element.html">&lt;path-permission&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/permission-element.html">&lt;permission&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/permission-group-element.html">&lt;permission-group&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/permission-tree-element.html">&lt;permission-tree&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/provider-element.html">&lt;provider&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/receiver-element.html">&lt;receiver&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/service-element.html">&lt;service&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/supports-gl-texture-element.html">&lt;supports-gl-texture&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/supports-screens-element.html">&lt;supports-screens&gt;</a></li><!-- ##api level 4## -->
          <li><a href="../../../guide/topics/manifest/uses-configuration-element.html">&lt;uses-configuration&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/uses-feature-element.html">&lt;uses-feature&gt;</a></li> <!-- ##api level 4## -->
          <li><a href="../../../guide/topics/manifest/uses-library-element.html">&lt;uses-library&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/uses-permission-element.html">&lt;uses-permission&gt;</a></li>
          <li><a href="../../../guide/topics/manifest/uses-sdk-element.html">&lt;uses-sdk&gt;</a></li>
        </ul>
      </li><!-- end of the manifest file -->
    </ul>

    <ul>
    <li class="toggle-list">
        <div><a href="../../../guide/topics/graphics/index.html">
            <span class="en">Graphics</span>
          </a><span class="new-child">new!</span></div>
        <ul>
          <li><a href="../../../guide/topics/graphics/2d-graphics.html">
              <span class="en">Canvas and Drawables</span></a></li>
          <li><a href="../../../guide/topics/graphics/hardware-accel.html">
              <span class="en">Hardware Acceleration</span></a>
            <span class="new">new!</span></li>
          <li><a href="../../../guide/topics/graphics/opengl.html">
              <span class="en">OpenGL</span>
            </a><span class="new">updated</span></li>
        </ul>
      </li>
      <li class="toggle-list">
        <div><a href="../../../guide/topics/graphics/animation.html">
            <span class="en">Animation</span>
          </a></div>
        <ul>
          <li><a href="../../../guide/topics/graphics/prop-animation.html">
              <span class="en">Property Animation</span></a></li>
          <li><a href="../../../guide/topics/graphics/view-animation.html">
              <span class="en">View Animation</span></a></li>
          <li><a href="../../../guide/topics/graphics/drawable-animation.html">
              <span class="en">Drawable Animation</span></a></li>
        </ul>
      </li>
      <li class="toggle-list">
	        <div><a href="../../../guide/topics/renderscript/index.html">
	            <span class="en">RenderScript</span>
	          </a></div>
	        <ul>
	          <li><a href="../../../guide/topics/renderscript/graphics.html">
	                <span class="en">Graphics</span>
	              </a>
	          </li>
	          <li><a href="../../../guide/topics/renderscript/compute.html">
	                <span class="en">Compute</span>
	              </a>
	          </li>
	        </ul>
  	  </li>

      <li class="toggle-list">
          <div><a href="../../../guide/topics/media/index.html">
            <span class="en">Multimedia and Camera</span>
          </a><span class="new">updated</span></div>
          <ul>
            <li><a href="../../../guide/topics/media/mediaplayer.html">
                  <span class="en">Media Playback</span></a>
                </li>
            <li><a href="../../../guide/topics/media/jetplayer.html">
                  <span class="en">JetPlayer</span></a>
                </li>
            <li><a href="../../../guide/topics/media/camera.html">
                  <span class="en">Camera</span></a>
                  <span class="new">new!</span>
                </li>
            <li><a href="../../../guide/topics/media/audio-capture.html">
                  <span class="en">Audio Capture</span></a>
                </li>
          </ul>
      </li>
      <li>
        <a href="../../../guide/topics/clipboard/copy-paste.html">
            <span class="en">Copy and Paste</span>
        </a></li>
  <!--<li class="toggle-list">
        <div><a style="color:gray;">Sensors</a></div>
          <ul>
            <li><a style="color:gray;">Camera</a></li>
            <li><a style="color:gray;">Compass</a></li>
            <li><a style="color:gray;">Accelerometer</a></li>
          </ul>
      </li> -->
      <li class="toggle-list">
        <div><a href="../../../guide/topics/location/index.html">
               <span class="en">Location and Maps</span>
             </a></div>
        <ul>
          <li><a href="../../../guide/topics/location/obtaining-user-location.html">
                <span class="en">Obtaining User Location</span>
              </a></li>
        </ul>
      </li>
  <!--<li class="toggle-list">
        <div><a style="color:gray;">Wireless Controls</a></div>
          <ul>
            <li><a style="color:gray;">Wi-Fi</a></li>
          </ul>
      </li> -->
  <!--<li><a style="color:gray;">Localization</a></li>  -->
      <li><a href="../../../guide/topics/appwidgets/index.html">
            <span class="en">App Widgets</span></a>
          </li>
      <li><a href="../../../guide/topics/wireless/bluetooth.html">
            <span class="en">Bluetooth</span></a>
          </li>
      <li><a href="../../../guide/topics/nfc/index.html">
            <span class="en">Near Field Communication</span>
          </a></li>
      <li class="toggle-list">
          <div><a href="../../../guide/topics/usb/index.html">
            <span class="en">USB</span></a>
          </div>
            <ul>
              <li><a href="../../../guide/topics/usb/accessory.html">Accessory</a></li>
              <li><a href="../../../guide/topics/usb/host.html">Host</a></li>
              <li><a href="../../../guide/topics/usb/adk.html">Open Accessory Dev Kit</a></li>
            </ul>
          </li>

       <li><a href="../../../guide/topics/network/sip.html">
            <span class="en">Session Initiation Protocol</span>
          </a></li>
      <li class="toggle-list">
        <div><a href="../../../guide/topics/search/index.html">
            <span class="en">Search</span>
          </a></div>
          <ul>
            <li><a href="../../../guide/topics/search/search-dialog.html">Creating a Search Interface</a></li>
            <li><a href="../../../guide/topics/search/adding-recent-query-suggestions.html">Adding Recent Query Suggestions</a></li>
            <li><a href="../../../guide/topics/search/adding-custom-suggestions.html">Adding Custom Suggestions</a></li>
            <li><a href="../../../guide/topics/search/searchable-config.html">Searchable Configuration</a></li>
          </ul>
      </li>
      <li><a href="../../../guide/topics/admin/device-admin.html">
            <span class="en">Device Administration</span></a>
      </li>
      <li class="toggle-list">
           <div>
                <a href="../../../guide/topics/testing/index.html">
                   <span class="en">Testing</span>
               </a>
           </div>
           <ul>
              <li>
                <a href="../../../guide/topics/testing/testing_android.html">
                <span class="en">Testing Fundamentals</span></a>
              </li>
              <li>
                <a href="../../../guide/topics/testing/activity_testing.html">
                <span class="en">Activity Testing</span></a>
              </li>
              <li>
                <a href="../../../guide/topics/testing/contentprovider_testing.html">
                <span class="en">Content Provider Testing</span></a>
              </li>
              <li>
                <a href="../../../guide/topics/testing/service_testing.html">
                <span class="en">Service Testing</span></a>
              </li>
              <li>
                <a href="../../../guide/topics/testing/what_to_test.html">
                <span class="en">What To Test</span></a>
              </li>
           </ul>
      </li>
    </ul>
  </li>

  <li>
    <h2>
      <span class="en">Android Market Topics</span>
    </h2>
    <ul>
      <li><a href="../../../guide/publishing/licensing.html">
          <span class="en">Application Licensing</span></a>
      </li>
      <li class="toggle-list">
        <div><a href="../../../guide/market/billing/index.html">
            <span class="en">In-app Billing</span></a>
        </div>
        <ul>
          <li><a href="../../../guide/market/billing/billing_overview.html">
              <span class="en">In-app Billing Overview</span></a>
          </li>
          <li><a href="../../../guide/market/billing/billing_integrate.html">
              <span class="en">Implementing In-app Billing</span></a>
          </li>
          <li><a href="../../../guide/market/billing/billing_best_practices.html">
              <span class="en">Security and Design</span></a>
          </li>
          <li><a href="../../../guide/market/billing/billing_testing.html">
              <span class="en">Testing In-app Billing</span></a>
          </li>
          <li><a href="../../../guide/market/billing/billing_admin.html">
              <span class="en">Administering In-app Billing</span></a>
          </li>
          <li><a href="../../../guide/market/billing/billing_reference.html">
              <span class="en">In-app Billing Reference</span></a>
          </li>
        </ul>
      </li>
      <li><a href="../../../guide/appendix/market-filters.html">
          <span class="en">Market Filters</span></a>
      </li>
      <li><a href="../../../guide/market/publishing/multiple-apks.html">
          <span class="en">Multiple APK Support</span></a>
      </li>
    </ul>
  </li>


  <li>
    <h2><span class="en">Developing</span>
               <span class="de" style="display:none">Entwicklung</span>
               <span class="es" style="display:none">Desarrollo</span>
               <span class="fr" style="display:none">Développement</span>
               <span class="it" style="display:none">Sviluppo</span>
               <span class="ja" style="display:none">開発</span>
               <span class="zh-CN" style="display:none">开发</span>
               <span class="zh-TW" style="display:none">開發</span>
    </h2>
    <ul>
  <!--<li><a href="">Developing for Android</a></li>
      signing, upgrading, selecting a package name, select device profile, touch, trackball, dpad available, etc. -->
      <li>
        <a href="../../../guide/developing/index.html">
        <span class="en">Introduction</span></a>
      </li>

      <li class="toggle-list">
        <div>
           <a href="../../../guide/developing/devices/index.html">
                <span class="en">Managing Virtual Devices</span>
            </a>
        </div>
        <ul>
          <li>
            <a href="../../../guide/developing/devices/managing-avds.html">
              <span class="en">With AVD Manager</span>
            </a>
          </li>
          <li>
            <a href="../../../guide/developing/devices/managing-avds-cmdline.html">
              <span class="en">From the Command Line</span>
            </a>
          </li>
          <li>
           <a href="../../../guide/developing/devices/emulator.html">
                <span class="en">Using the Android Emulator</span>
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="../../../guide/developing/device.html">
          <span class="en">Using Hardware Devices</span>
        </a>
      </li>

      <li class="toggle-list">
        <div>
          <a href="../../../guide/developing/projects/index.html">
            <span class="en">Managing Projects</span>
          </a>
        </div>
        <ul>
          <li>
            <a href="../../../guide/developing/projects/projects-eclipse.html">
              <span class="en">From Eclipse with ADT</span>
            </a>
          </li>
          <li>
            <a href="../../../guide/developing/projects/projects-cmdline.html">
                <span class="en">From the Command Line</span>
            </a>
          </li>
        </ul>
      </li>

      <li class="toggle-list">
        <div>
          <a href="../../../guide/developing/building/index.html">
            <span class="en">Building and Running</span>
          </a>
        </div>
        <ul>
          <li><a href="../../../guide/developing/building/building-eclipse.html">
            <span class="en">From Eclipse with ADT</span>
          </a></li>
          <li><a href="../../../guide/developing/building/building-cmdline.html">
            <span class="en">From the Command Line</span></a></li>
        </ul>
      </li>

      <li class="toggle-list">
        <div>
          <a href="../../../guide/developing/debugging/index.html">
            <span class="en">Debugging</span>
          </a>
        </div>
        <ul>
          <li>
            <a href="../../../guide/developing/debugging/debugging-projects.html">
                <span class="en">From Eclipse with ADT</span>
            </a>
          </li>
          <li>
            <a href="../../../guide/developing/debugging/debugging-projects-cmdline.html">
                <span class="en">From Other IDEs</span>
            </a>
          </li>
          <li>
            <a href="../../../guide/developing/debugging/ddms.html">
              <span class="en">Using DDMS</span>
            </a>
          </li>
          <li>
            <a href="../../../guide/developing/debugging/debugging-log.html">
                <span class="en">Reading and Writing Logs</span>
            </a>
          </li>
          <li>
            <a href="../../../guide/developing/debugging/debugging-ui.html">
                <span class="en">Debugging and Profiling UIs</span>
            </a>
          </li>
          <li>
            <a href="../../../guide/developing/debugging/debugging-tracing.html">
                <span class="en">Profiling with Traceview and dmtracedump</span>
            </a>
          </li>
          <li>
            <a href="../../../guide/developing/debugging/debugging-devtools.html">
                <span class="en">Using the Dev Tools App</span>
            </a>
          </li>
        </ul>
      </li>

      <li class="toggle-list">
           <div>
                <a href="../../../guide/developing/testing/index.html">
                   <span class="en">Testing</span>
               </a>
           </div>
           <ul>
              <li>
                <a href="../../../guide/developing/testing/testing_eclipse.html">
                  <span class="en">From Eclipse with ADT</span>
                </a>
              </li>

              <li>
                <a href="../../../guide/developing/testing/testing_otheride.html">
                  <span class="en">From Other IDEs</span>
                </a>
              </li>
           </ul>
         </li>

         <li class="toggle-list">
        <div><a href="../../../guide/developing/tools/index.html">
            <span class="en">Tools</span>
          </a></div>
        <ul>
          <li><a href="../../../guide/developing/tools/adb.html">adb</a></li>
          <li><a href="../../../guide/developing/tools/adt.html">ADT</a></li>
          <li><a href="../../../guide/developing/tools/android.html">android</a></li>
          <li><a href="../../../guide/developing/tools/bmgr.html">bmgr</a>
          <li><a href="../../../guide/developing/tools/dmtracedump.html">dmtracedump</a></li>
          <li><a href="../../../guide/developing/tools/draw9patch.html">Draw
          9-Patch</a></li>
          <li><a href="../../../guide/developing/tools/emulator.html">Emulator</a></li>
          <li><a href="../../../guide/developing/tools/etc1tool.html">etc1tool</a></li>
          <li><a href="../../../guide/developing/tools/hierarchy-viewer.html">Hierarchy Viewer</a></li>
          <li><a href="../../../guide/developing/tools/hprof-conv.html">hprof-conv</a></li>
          <li><a href="../../../guide/developing/tools/layoutopt.html">layoutopt</a></li>
          <li><a href="../../../guide/developing/tools/logcat.html">logcat</a></li>
          <li><a href="../../../guide/developing/tools/mksdcard.html">mksdcard</a></li>
          <li><a href="../../../guide/developing/tools/monkey.html">Monkey</a></li>
          <li class="toggle-list">
            <div><a href="../../../guide/developing/tools/monkeyrunner_concepts.html">
              <span class="en">monkeyrunner</span>
            </a></div>
            <ul>
              <li><a href="../../../guide/developing/tools/MonkeyDevice.html">
                <span class="en">MonkeyDevice</span>
                </a></li>
              <li><a href="../../../guide/developing/tools/MonkeyImage.html">
                <span class="en">MonkeyImage</span>
                </a></li>
              <li><a href="../../../guide/developing/tools/MonkeyRunner.html">
                <span class="en">MonkeyRunner</span>
                </a></li>
            </ul>
          </li>
          <li><a href="../../../guide/developing/tools/proguard.html">ProGuard</a></li>
          <li><a href="../../../guide/developing/tools/adb.html#sqlite">sqlite3</a></li>
          <li><a href="../../../guide/developing/tools/traceview.html">Traceview</a></li>
          <li><a href="../../../guide/developing/tools/zipalign.html">zipalign</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li>
    <h2><span class="en">Publishing</span>
        <span class="de" style="display:none">Veröffentlichung</span>
        <span class="es" style="display:none">Publicación</span>
        <span class="fr" style="display:none">Publication</span>
        <span class="it" style="display:none">Pubblicazione</span>
        <span class="ja" style="display:none">公開</span>
        <span class="zh-CN" style="display:none">发布</span>
        <span class="zh-TW" style="display:none">發佈</span>
    </h2>
    <ul>
      <li><a href="../../../guide/publishing/app-signing.html">
            <span class="en">Signing Your Applications</span>
            <span class="de" style="display:none">Signieren Ihrer Anwendungen</span>
            <span class="es" style="display:none">Firma de aplicaciones</span>
            <span class="fr" style="display:none">Attribution de votre signature <br />à vos applications</span>
            <span class="it" style="display:none">Firma delle applicazioni</span>
            <span class="ja" style="display:none">アプリケーションへの署名</span>
            <span class="zh-CN" style="display:none">应用程序签名</span>
            <span class="zh-TW" style="display:none">簽署應用程式</span>
          </a></li>
      <li><a href="../../../guide/publishing/versioning.html">
            <span class="en">Versioning Your Applications</span>
            <span class="de" style="display:none">Versionsverwaltung für Ihre <br />Anwendungen</span>
            <span class="es" style="display:none">Versiones de las aplicaciones</span>
            <span class="fr" style="display:none">Attribution d'une version à vos applications</span>
            <span class="it" style="display:none">Controllo versioni delle applicazioni</span>
            <span class="ja" style="display:none">アプリケーションのバージョニング</span>
            <span class="zh-CN" style="display:none">应用程序版本控制</span>
            <span class="zh-TW" style="display:none">應用程式版本設定</span>
          </a></li>
      <li><a href="../../../guide/publishing/preparing.html">
            <span class="en">Preparing to Publish</span>
            <span class="de" style="display:none">Vorbereitung auf die Veröffentlichung</span>
            <span class="es" style="display:none">Publicación de aplicaciones</span>
            <span class="fr" style="display:none">Préparation à la publication</span>
            <span class="it" style="display:none">Preparativi per la pubblicazione</span>
            <span class="ja" style="display:none">公開の準備</span>
            <span class="zh-CN" style="display:none">准备发布</span>
            <span class="zh-TW" style="display:none">準備發佈</span>
          </a></li>
      <li><a href="../../../guide/publishing/publishing.html">
            <span class="en">Publishing on Android Market</span>
          </a></li>
    </ul>
  </li>

  <li>
    <h2><span class="en">Best Practices</span>
               <span class="de" style="display:none">Bewährte Verfahren</span>
               <span class="es" style="display:none">Prácticas recomendadas</span>
               <span class="fr" style="display:none">Meilleures pratiques</span>
               <span class="it" style="display:none">Best practice</span>
               <span class="ja" style="display:none">ベスト プラクティス</span>
               <span class="zh-CN" style="display:none">最佳实践</span>
               <span class="zh-TW" style="display:none">最佳實務</span>
    </h2>
    <ul>
      <li><a href="../../../guide/practices/compatibility.html">
            <span class="en">Compatibility</span>
          </a></li>
      <li class="toggle-list">
        <div><a href="../../../guide/practices/screens_support.html">
          <span class="en">Supporting Multiple Screens</span>
        </a></div>
        <ul>
          <li><a href="../../../guide/practices/screens-distribution.html">
            <span class="en">Distributing to Specific Screens</span>
          </a></li>
          <li><a href="../../../guide/practices/screen-compat-mode.html">
            <span class="en">Screen Compatibility Mode</span>
          </a></li>
          <li><a href="../../../guide/practices/screens-support-1.5.html">
            <span class="en">Strategies for Android 1.5</span>
          </a></li>
        </ul>
      </li>
      <li><a href="../../../guide/practices/optimizing-for-3.0.html">
            <span class="en">Optimizing Apps for Android 3.0</span>
          </a></li>
      <li class="toggle-list">
        <div><a href="../../../guide/practices/ui_guidelines/index.html">
               <span class="en">UI Guidelines</span>
             </a></div>
        <ul>
          <li class="toggle-list">
            <div><a href="../../../guide/practices/ui_guidelines/icon_design.html">
                   <span class="en">Icon Design <span class="new">updated</span></span>
                 </a></div>
            <ul>
              <li><a href="../../../guide/practices/ui_guidelines/icon_design_launcher.html">
                    <span class="en">Launcher Icons <span class="new">updated</span></span>
                  </a></li>
              <li><a href="../../../guide/practices/ui_guidelines/icon_design_menu.html">
                    <span class="en">Menu Icons</span>
                  </a></li>
              <li><a href="../../../guide/practices/ui_guidelines/icon_design_action_bar.html">
                    <span class="en">Action Bar Icons <span class="new">new!</span></span>
                  </a></li>
              <li><a href="../../../guide/practices/ui_guidelines/icon_design_status_bar.html">
                    <span class="en">Status Bar Icons <span class="new">updated</span></span>
                  </a></li>
              <li><a href="../../../guide/practices/ui_guidelines/icon_design_tab.html">
                    <span class="en">Tab Icons</span>
                  </a></li>
              <li><a href="../../../guide/practices/ui_guidelines/icon_design_dialog.html">
                    <span class="en">Dialog Icons</span>
                  </a></li>
              <li><a href="../../../guide/practices/ui_guidelines/icon_design_list.html">
                    <span class="en">List View Icons</span>
                  </a></li>
            </ul>
          </li>
          <li><a href="../../../guide/practices/ui_guidelines/widget_design.html">
                <span class="en">App Widget Design <span class="new">updated</span></span>
              </a></li>
          <li><a href="../../../guide/practices/ui_guidelines/activity_task_design.html">
                <span class="en">Activity and Task Design</span>
              </a></li>
          <li><a href="../../../guide/practices/ui_guidelines/menu_design.html">
                <span class="en">Menu Design</span>
              </a></li>
        </ul>
      </li>
      </ul>
      <ul>
      <li><a href="../../../guide/practices/design/accessibility.html">
            <span class="en">Designing for Accessibility</span>
          </a></li>
      <li class="toggle-list">
        <div><a href="../../../guide/practices/design/performance.html">
            <span class="en">Designing for Performance</span>
          </a></div>
        <ul>
          <li><a href="../../../guide/practices/design/jni.html">
                <span class="en">JNI Tips</span>
              </a></li>
        </ul>
      </li>
      <li><a href="../../../guide/practices/design/responsiveness.html">
            <span class="en">Designing for Responsiveness</span>
          </a></li>
      <li><a href="../../../guide/practices/design/seamlessness.html">
            <span class="en">Designing for Seamlessness</span>
          </a></li>
    </ul>
  </li>

  <li>
    <h2><span class="en">Web Applications</span>
    </h2>
    <ul>
      <li><a href="../../../guide/webapps/index.html">
            <span class="en">Web Apps Overview</span>
          </a></li>
      <li><a href="../../../guide/webapps/targeting.html">
            <span class="en">Targeting Screens from Web Apps</span>
          </a></li>
      <li><a href="../../../guide/webapps/webview.html">
            <span class="en">Building Web Apps in WebView</span>
          </a></li>
      <li><a href="../../../guide/webapps/debugging.html">
            <span class="en">Debugging Web Apps</span>
          </a></li>
      <li><a href="../../../guide/webapps/best-practices.html">
            <span class="en">Best Practices for Web Apps</span>
          </a></li>
    </ul>
  </li>

  <li>
    <h2><span class="en">Appendix</span>
               <span class="de" style="display:none">Anhang</span>
               <span class="es" style="display:none">Apéndice</span>
               <span class="fr" style="display:none">Annexes</span>
               <span class="it" style="display:none">Appendice</span>
               <span class="ja" style="display:none">付録</span>
               <span class="zh-CN" style="display:none">附录</span>
               <span class="zh-TW" style="display:none">附錄</span>
    </h2>
    <ul>
      <li><a href="../../../guide/appendix/api-levels.html">
            <span class="en">Android API Levels</span>
          </a></li>
      <li><a href="../../../guide/appendix/install-location.html">
            <span class="en">App Install Location</span>
          </a></li>
      <li><a href="../../../guide/appendix/media-formats.html">
            <span class="en">Supported Media Formats <span class="new">updated</span></span>
          </a></li>
      <li><a href="../../../guide/appendix/g-app-intents.html">
            <span class="en">Intents List: Google Apps</span>
          </a></li>
      <li><a href="../../../guide/developing/tools/aidl.html">AIDL</a></li>
      <li><a href="../../../guide/appendix/glossary.html">
            <span class="en">Glossary</span>
          </a></li>
    </ul>
  </li>

</ul>

<script type="text/javascript">
<!--
    buildToggleLists();
    changeNavLang(getLangPref());
//-->
</script>

      </div>
    </div> <!-- end side-nav -->
    <script>
      addLoadEvent(function() {
        scrollIntoView("devdoc-nav");
        });
    </script>




<div class="g-unit" id="doc-content"><a name="top"></a>

<div id="jd-header" class="guide-header">
  <span class="crumb">
    
      <a href="index.html">Debugging</a> >
    
  </span>
<h1>Debugging and Profiling User Interfaces</h1>
</div>

  <div id="jd-content">

    <div class="jd-descr">
    <div id="qv-wrapper">
    <div id="qv">
      <h2>In this document</h2>

      <ol>
        <li>
            <a href="#HierarchyViewer">
                Debugging and Optimizing User Interfaces with Hierarchy Viewer
            </a>
            <ol>
                <li><a href="#runhv">Running Hierarchy Viewer and choosing a window</a></li>
                <li><a href="#viewhierarchy">About the View Hierarchy window</a></li>
                <li><a href="#indiView">Working with an individual View in Tree View</a></li>
                <li><a href="#hvdebugging">Debugging with View Hierarchy</a></li>
                <li><a href="#hvoptimize">Optimizing with View Hierarchy</a></li>
            </ol>
        </li>
        <li>
            <a href="#pixelperfect">
                Examining and Designing User Interfaces with Pixel Perfect
            </a>
            <ol>
                <li><a href="#aboutpixelperfect">About the Pixel Perfect window</a></li>
                <li><a href="#overlays">Working with Pixel Perfect overlays</a></li>
            </ol>
        </li>
        <li><a href="#layoutopt">Optimizing Layouts with <code>layoutopt</code></a></li>
      </ol>
      <h2>Related videos</h2>
          <ol>
              <li>
<iframe title="Hierarchyviewer" 
    width="272" height="234" 
    src="http://www.youtube.com/embed/PAgE7saQUUY?rel=0&amp;hd=1" 
    frameborder="0" allowfullscreen>
</iframe>
              </li>
              <li>
<iframe title="Pixel Perfect" 
    width="272" height="234" 
    src="http://www.youtube.com/embed/C45bMZGdN7Y?rel=0&amp;hd=1" 
    frameborder="0" 
    allowfullscreen>
</iframe>
              </li>
          </ol>
    </div>
  </div>

  <p>
Sometimes your application's layout can slow down your application.
  To help debug issues in your layout, the Android SDK provides the Hierarchy Viewer and
  <code>layoutopt</code> tools.
  </p>

  <p>The Hierarchy Viewer application allows you to debug and optimize your user interface. It
  provides a visual representation of the layout's View hierarchy (the View Hierarchy window)
  and a magnified view of the display (the Pixel Perfect window).</p>

  <p><code>layoutopt</code> is a command-line tool that helps you optimize the layouts and layout
  hierarchies of your applications. You can run it against your layout files or resource
  directories to quickly check for inefficiencies or other types of problems that could be
  affecting the performance of your application.</p>

<h2 id="HierarchyViewer">Debugging and Optimizing User Interfaces with Hierarchy Viewer</h2>

<h3 id="runhv">Running Hierarchy Viewer and choosing a window</h3>
<p>
    To run Hierarchy Viewer, follow these steps:</p>
<ol>
    <li>
        Connect your device or launch an emulator.
        <p>
            To preserve security, Hierarchy Viewer can only connect to devices running a
            developer version of the Android system.
        </p>
    </li>
    <li>
        If you have not done so already, install the application you want to work with.
    </li>
    <li>
        Run the application, and ensure that its UI is visible.
    </li>
    <li>
        From a terminal, launch <code>hierarchyviewer</code> from the
        <code>&lt;sdk&gt;/tools/</code>
        directory.
    </li>
    <li>
        The first window you see displays a list of devices and emulators. To expand the list
        of Activity objects for a device or emulator, click the arrow on the left. This displays a
        list of the Activity objects whose UI is currently visible on the device or emulator. The
        objects are listed by their Android component name. The list includes both your application
        Activity and system Activity objects. A screenshot of this window appears in
        figure 1.
    </li>
    <li>
        Select the name of your Activity from the list. You can now look at its view
        hierarchy using the View Hierarchy window, or look at a magnified image of the UI using
        the Pixel Perfect window.
    </li>
</ol>
<p>
    To learn how to use the View Hierarchy window, go to
    <a href="#viewhierarchy">About the View Hierarchy window</a>. To learn how to use the
    Pixel Perfect window, go to <a href="#pixelperfect">About the Pixel Perfect window</a>.
</p>
<img id="Fig1" src="../../../images/developing/hv_device_window.png" alt="" height="600"/>
<p class="img-caption"><strong>Figure 1.</strong> Hierarchy Viewer device window</p>
<h3 id="viewhierarchy">About the View Hierarchy window</h3>
<p>
    The View Hierarchy window displays the View objects that form the UI of the
    Activity that is running on your device or emulator. You use it to look at individual
    View objects within the context of the entire View tree. For each View object, the View
    Hierarchy window also displays rendering performance data.
</p>
<p>
    To see the View Hierarchy window, run Hierarchy Viewer as described in
    the section <a href="#runhv">Running Hierarchy Viewer and choosing a window</a>. Next, click
    <strong>View Hierarchy</strong> at the top of the device window.
</p>
<p>
    You should see four panes:
</p>
<ul>
    <li>
        <strong>Tree View</strong>: The left-hand pane displays the Tree View,
        a diagram of the Activity object's hierarchy of views. Use Tree View to examine individual
        View objects and see the relationships between View objects in your UI.
        <p>
            To zoom in on the pane, use the slider at the bottom of the pane, or use your mouse
            scroll wheel. To move around in the pane or reveal View objects that are not currently
            visible, click and drag the pane.
        </p>
        <p>
            To highlight the nodes in the tree whose class or ID match a search string, enter the
            string in the <strong>Filter by class or id:</strong> edit box at the bottom of the
            window. The background of nodes that match the search string will change from gray to
            bright blue.
        </p>
        <p>
            To save a screenshot of Tree View to a PNG file, click <strong>Save As PNG</strong> at
            the top of the View Hierarchy window. This displays a dialog in which you can choose
            a directory and file name.
        </p>
        <p>
            To save a layered screenshot of your device or emulator to an Adobe Photoshop (PSD)
            file, click <strong>Capture Layers</strong> at the top of the View Hierarchy window.
            This displays a dialog in which you can choose a directory or file name.
            Each View in the UI is saved as a separate Photoshop layer.
        </p>
        <p>
            In Photoshop (or similar program that accepts .psd files), you can hide, show or edit a
            layer independently of others. When you save a layered screenshot, you can examine and
            modify the image of an individual View object. This helps you experiment with design
            changes.
        </p>
    </li>
    <li>
        The upper right-hand pane displays the <strong>Tree Overview</strong>, a smaller map
        representation of the entire Tree View window. Use Tree Overview to identify the part of the
        view tree that is being displayed in Tree View.
        <p>
            You can also use Tree Overview to move around in the Tree View pane. Click and drag
            the shaded rectangle over an area to reveal it in Tree View.
        </p>
    </li>
    <li>
        The middle right-hand pane displays the <strong>Properties View</strong>,
        a list of the properties for a selected View object. With Properties View, you can
        examine all the properties without having to look at your application source.
        <p>
            The properties are organized by category. To find an individual property, expand
            a category name by clicking the arrow on its left. This reveals all the properties
            in that category.
        </p>
    </li>
    <li>
        The lower right-hand pane displays the <strong>Layout View</strong>,
        a block representation of the UI. Layout View is another way to navigate through your UI.
        When you click on a View object in Tree View, its position in the UI is highlighted.
        Conversely, when you click in an area of Layout View, the View object for that area is
        highlighted in Tree View.
        <p>
            The outline colors of blocks in Layout View provide additional information:
        </p>
            <ul>
                <li>
                    Bold red: The block represents the the View that is currently selected in
                    Tree View.
                </li>
                <li>
                    Light red: The block represents the parent of the block outlined in bold red.
                </li>
                <li>
                    White: The block represents a visible View that is not a parent or child of the
                    View that is currently selected in Tree View.
                </li>
            </ul>
    </li>
</ul>
<p>
    When the UI of the current Activity changes, the View Hierarchy window is not automatically
    updated. To update it, click <strong>Load View Hierarchy</strong> at the top of the window.
</p>
<p>
    Also, the window is not updated if you switch to a new Activity. To update it, start by
    clicking the window selection icon in the bottom left-hand corner of the window. This
    navigates back to the Window Selection window. From this window, click the Android
    component name of the new Activity and then click <strong>Load View Hierarchy</strong>
    at the top of the window.
</p>
<p>
    A screenshot of the View Hierarchy window appears in figure 2.
</p>
<img id="Fig2" src="../../../images/developing/hv_view_hierarchy_window.png" alt="" height="600"/>
<p class="img-caption"><strong>Figure 2.</strong> The View Hierarchy window</p>
<h3 id="indiView">Working with an individual View in Tree View</h3>
<p>
    Each node in Tree View represents a single View. Some information is always visible. Starting
    at the top of the node, you see the following:
</p>
<ol>
    <li>
        View class: The View object's class.
    </li>
    <li>
        View object address: A pointer to View object.
    </li>
    <li>
        View object ID: The value of the
        <code><a href="../../../guide/topics/resources/layout-resource.html#idvalue">android:id</a>
        </code> attribute.
    </li>
    <li>
        Performance indicators: A set of three colored dots that indicate the rendering
        speed of this View relative to other View objects in the tree. The three dots
        represent (from left to right) the measure, layout, and draw times of the rendering.
        <p>
            The colors indicate the following relative performance:
        </p>
        <ul>
            <li>
                Green: For this part of the render time, this View is in the faster 50% of all
                the View objects in the tree. For example, a green dot for the measure time means
                that this View has a faster measure time than 50% of the View objects in the tree.
            </li>
            <li>
                Yellow: For this part of the render time, this View is in the slower 50% of all
                the View objects in the tree. For example, a yellow dot for the layout time means
                that this View has a slower layout time than 50% of the View objects in the tree.
            </li>
            <li>
                Red: For this part of the render time, this View is the slowest one in the tree.
                For example, a red dot for the draw time means that this View takes the most
                time to draw of all the View objects in the tree.
            </li>
        </ul>
    </li>
    <li>
        View index: The zero-based index of the View in its parent View. If it is the only child,
        this is 0.
    </li>
</ol>
<p>
    When you select a node, additional information for the View appears in a small window above
    the node. When you click one of the nodes, you see the following:
</p>
<ul>
    <li>
        Image: The actual image of the View, as it would appear in the emulator. If the View has
        children, these are also displayed.
    </li>
    <li>
        View count: The number of View objects represented by this node. This includes the View
        itself and a count of its children. For example, this value is 4 for a View that has 3
        children.
    </li>
    <li>
        Render times: The actual measure, layout, and draw times for the View rendering, in
        milliseconds. These represent the same values as the performance indicators mentioned in
        the preceding section.
    </li>
</ul>
<p>
    An annotated screenshot of an individual node in the Tree View window appears in figure 3.
</p>
<img id="Fig3" src="../../../images/developing/hv_treeview_screenshot.png" alt="" height="600"/>
<p class="img-caption"><strong>Figure 3.</strong> An annotated node in Tree View</p>
<h3 id="hvdebugging">Debugging with View Hierarchy</h3>
<p>
    The View Hierarchy window helps you debug an application by providing a static display
    of the UI. The display starts with your application's opening screen. As you step through
    your application, the display remains unchanged until you redraw it by invalidating and
    then requesting layout for a View.
</p>
<p>
    To redraw a View in the display:
</p>
    <ul>
        <li>
            Select a View in Tree View. As you move up towards the root of the tree (to the
            left in the Tree View), you see the highest-level View objects. Redrawing a high-level
            object usually forces the lower-level objects to redraw as well.
        </li>
        <li>
            Click <strong>Invalidate</strong> at the top of the window. This marks the View as
            invalid, and schedules it for a redraw at the next point that a layout is requested.
        </li>
        <li>
            Click <strong>Request Layout</strong> to request a layout. The View and its children
            are redrawn, as well as any other View objects that need to be redrawn.
        </li>
    </ul>
<p>
    Manually redrawing a View allows you to watch the View object tree and examine the properties of
    individual View objects one step at a time as you go through breakpoints in your code.
</p>
<h3 id="hvoptimize">Optimizing with View Hierarchy</h3>
<p>
    View Hierarchy also helps you identify slow render performance. You start by looking at the
    View nodes with red or yellow performance indicators to identify the slower View objects. As you
    step through your application, you can judge if a View is consistently slow or slow only in
    certain circumstances.
</p>
<p>
    Remember that slow performance is not necessarily evidence of a problem, especially for
    ViewGroup objects. View objects that have more children and more complex View objects render
    more slowly.
</p>
<p>
    The View Hierarchy window also helps you find performance issues. Just by looking at the
    performance indicators (the dots) for each View node, you can see which View objects are the
    slowest to measure, layout, and draw. From that, you can quickly identify the problems you
    should look at first.
</p>
<h2 id="pixelperfect">Examining and Designing User Interfaces with Pixel Perfect</h2>
<p>
    Pixel Perfect is a tool for examining pixel properties and laying out UIs from a design drawing.
</p>
<h3 id="aboutpixelperfect">About the Pixel Perfect window</h3>
<p>
    The Pixel Perfect window displays a magnified image of the screen that is currently
    visible on the emulator or device. In it, you can examine the properties
    of individual pixels in the screen image. You can also use the Pixel Perfect window
    to help you lay out your application UI based on a bitmap design.
</p>
<p>
    To see the Pixel Perfect window, run Hierarchy Viewer, as described in
    the section <a href="#runhv">Running Hierarchy Viewer and choosing a window</a>. Next, click
    <strong>Inspect Screenshot</strong> at the top of the device window. The Pixel Perfect window
    appears.
</p>
<p>
    In it, you see three panes:
</p>
<ul>
    <li>
        View Object pane: This is a hierarchical list of the View objects that are currently
        visible on the device or emulator screen, including both the ones in your application and
        the ones generated by the system. The objects are listed by their View class.
        To see the class names of a View object's children, expand the View by clicking the
        arrow to its left. When you click a View, its position is highlighted in the Pixel Perfect
        pane on the right.
    </li>
    <li>
        Pixel Perfect Loupe pane: This is the magnified screen image. It is overlaid by a grid in
        which each square represents one pixel. To look at the information for a pixel, click in its
        square. Its color and X,Y coordinates appear at the bottom of the pane.
        <p>
            The magenta crosshair in the pane corresponds to the positioning
            crosshair in the next pane. It only moves when you move the crosshair in the next pane.
        </p>
        <p>
            To zoom in or out on the image, use the <strong>Zoom</strong> slider at the bottom of
            the pane, or use your mouse's scroll wheel.
        </p>
        <p>
            When you select a pixel in the Loupe pane, you see the following information at the
            bottom of the pane:
        </p>
        <ul>
            <li>
                Pixel swatch: A rectangle filled with the same color as the pixel.
            </li>
            <li>
                HTML color code: The hexadecimal RGB code corresponding to the pixel color
            </li>
            <li>
                RGB color values: A list of the (R), green (G), and blue (B) color values of the
                pixel color. Each value is in the range 0-255.
            </li>
            <li>
                X and Y coordinates: The pixel's coordinates, in device-specific pixel units.
                The values are 0-based, with X=0 at the left of the screen and Y=0 at the top.
            </li>
        </ul>
    </li>
    <li>
        Pixel Perfect pane: This displays the currently visible screen as it would appear in the
        emulator.
        <p>
            You use the cyan crosshair to do coarse positioning. Drag the crosshair in the image,
            and the Loupe crosshair will move accordingly. You can also click on a point in the
            Pixel Perfect pane, and the crosshair will move to that point.
        </p>
        <p>
            The image corresponding to the View object selected in the View Object pane is
            outlined in a box that indicates the View object's position on the screen. For the
            selected object, the box is bold red. Sibling and parent View objects have a light
            red box. View objects that are neither parents nor siblings are in white.
        </p>
        <p>
            The layout box may have other rectangles either inside or outside it, each of which
            indicates part of the View. A purple or green rectangle indicates the View bounding box.
            A white or black box inside the layout box represents the <strong>padding</strong>, the
            defined distance between the View object's content and its bounding box. An outer white
            or black rectangle represents the <strong>margins</strong>, the distance between the
            View bounding box and adjacent View objects. The padding and margin boxes are white if
            the layout background is black, and vice versa.
        </p>
        <p>
            You can save the screen image being displayed in the Pixel Perfect pane as a PNG file.
            This produces a screenshot of the current screen. To do this, click
            <strong>Save as PNG</strong> at the top of the window. This displays a dialog,
            in which you can choose a directory and filename for the file.
        </p>
    </li>
</ul>
<p>
    The panes are not automatically refreshed when you change one of the View objects or go to
    another Activity. To refresh the Pixel Perfect pane and the Loupe pane, click
    <strong>Refresh Screenshot</strong> at the top of the window. This will change the panes
    to reflect the current screen image. You still may need to refresh the View Object pane;
    to do this, click <strong>Refresh Tree</strong> at the top of the window.
</p>
<p>
    To automatically refresh the panes while you are debugging, set
    <strong>Auto Refresh</strong> at the top of the window, and then set a refresh rate
    with the <strong>Refresh Rate</strong> slider at the bottom of the Loupe pane.
</p>
<h3 id="overlays">Working with Pixel Perfect overlays</h3>
<p>
    You often construct a UI based on a design done as a bitmap image. The Pixel Perfect window
    helps you match up your View layout to a bitmap image by allowing you to load the bitmap as an
    <strong>overlay</strong> on the screen image.
</p>
<p>
    To use a bitmap image as an overlay:
</p>
<ul>
    <li>
        Start your application in a device or emulator and navigate to the Activity whose UI you
        want to work with.
    </li>
    <li>
        Start Hierarchy Viewer and navigate to the Pixel Perfect window.
    </li>
    <li>
        At the top of the window, click <strong>Load Overlay</strong>. A dialog opens, prompting
        for the image file to load. Load the image file.
    </li>
    <li>
        Pixel Perfect displays the overlay over the screen image in the Pixel Perfect pane. The
        lower left corner of the bitmap image (X=0, Y=<em>max value</em>) is anchored on the lower
        leftmost pixel (X=0, Y=<em>max screen</em>) of the screen.
        <p>
            By default, the overlay has a 50% transparency, which allows you to see the screen
            image underneath. You can adjust this with the <strong>Overlay:</strong> slider at the
            bottom of the Loupe pane.
        </p>
        <p>
            Also by default, the overlay is not displayed in the Loupe pane. To display it,
            set <strong>Show in Loupe</strong> at the top of the window.
        </p>
    </li>
</ul>
<p>
    The overlay is not saved as part of the screenshot when you save the screen image as a PNG
    file.
</p>
<p>
    A screenshot of the Pixel Perfect window appears in figure 4.
</p>
<img id="Fig4" src="../../../images/developing/hv_pixelperfect.png"
        alt=""
        height="600"/>
<p class="img-caption"><strong>Figure 4.</strong> The Pixel Perfect window</p>
<h2 id="layoutopt">Optimizing layouts with layoutopt</h2>
<p>
    The <code>layoutopt</code> tool lets you analyze the XML files that define your
    application's UI to find inefficiencies in the view hierarchy.</p>

<p>
    To run the tool, open a terminal and launch <code>layoutopt &lt;xmlfiles&gt;</code>
    from your SDK <code>tools/</code> directory. The &lt;xmlfiles&gt; argument is a space-
    delimited list of resources you want to analyze, either uncompiled resource xml files or
    directories of such files.
</p>
<p>
    The tool loads the specified XML files and analyzes their definitions and
    hierarchies according to a set of predefined rules. For every issue it detects, it
    displays the following information:
</p>
<ul>
    <li>
        The filename in which the issue was detected.
    </li>
    <li>
        The line number for the issue.
    </li>
    <li>
        A description of the issue, and for some types of issues it also suggests a resolution.
    </li>
</ul>
<p>The following is a sample of the output from the tool:</p>
<pre>
$ layoutopt samples/
samples/compound.xml
   7:23 The root-level &lt;FrameLayout/&gt; can be replaced with &lt;merge/&gt;
   11:21 This LinearLayout layout or its FrameLayout parent is useless
samples/simple.xml
   7:7 The root-level &lt;FrameLayout/&gt; can be replaced with &lt;merge/&gt;
samples/too_deep.xml
   -1:-1 This layout has too many nested layouts: 13 levels, it should have &lt;= 10!
   20:81 This LinearLayout layout or its LinearLayout parent is useless
   24:79 This LinearLayout layout or its LinearLayout parent is useless
   28:77 This LinearLayout layout or its LinearLayout parent is useless
   32:75 This LinearLayout layout or its LinearLayout parent is useless
   36:73 This LinearLayout layout or its LinearLayout parent is useless
   40:71 This LinearLayout layout or its LinearLayout parent is useless
   44:69 This LinearLayout layout or its LinearLayout parent is useless
   48:67 This LinearLayout layout or its LinearLayout parent is useless
   52:65 This LinearLayout layout or its LinearLayout parent is useless
   56:63 This LinearLayout layout or its LinearLayout parent is useless
samples/too_many.xml
   7:413 The root-level &lt;FrameLayout/&gt; can be replaced with &lt;merge/&gt;
   -1:-1 This layout has too many views: 81 views, it should have &lt;= 80!
samples/useless.xml
   7:19 The root-level &lt;FrameLayout/&gt; can be replaced with &lt;merge/&gt;
   11:17 This LinearLayout layout or its FrameLayout parent is useless
</pre>

    </div>

  <a href="#top" style="float:right">&uarr; Go to top</a>
  
    <p><a href="index.html">&larr; Back to Debugging</a></p>
  
  </div>

<div id="footer">


  <div id="copyright">
    
  Except as noted, this content is licensed under <a
  href="http://www.apache.org/licenses/LICENSE-2.0">Apache 2.0</a>. 
  For details and restrictions, see the <a href="../../../license.html">
  Content License</a>.
  </div>
  <div id="build_info">
    
  Android 4.0&nbsp;r1 - 17 Oct 2011 18:17

  </div>

  <div id="footerlinks">
    
  <p>
    <a href="http://www.android.com/terms.html">Site Terms of Service</a> -
    <a href="http://www.android.com/privacy.html">Privacy Policy</a> -
    <a href="http://www.android.com/branding.html">Brand Guidelines</a>
  </p>
  </div>

</div> <!-- end footer -->

</div><!-- end doc-content -->

</div> <!-- end body-content --> 

<script type="text/javascript">
init(); /* initialize android-developer-docs.js */
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5831155-1");
pageTracker._trackPageview();
</script>

</body>
</html>



